<script lang="ts" setup>
import ToastEditor from './toastEditor';
import { nextTick } from 'vue';
interface IProps {
  modelValue?: string;
  height?: number;
  placeholder?: string;
}
const props = withDefaults(defineProps<IProps>(), {
  modelValue: 'qwer',
  height: 500,
  placeholder: ''
});

const emit = defineEmits(['update:modelValue']);
nextTick(() => {
  const toastUi = new ToastEditor('#editor', `${props.height}px`, `${props.modelValue}`);
  console.log('🚀 ~ file: editor.vue:19 ~ nextTick ~ toastUi', toastUi);
  toastUi.editor.on('change', (type: string) => {
    const contentType = type === 'markdown' ? 'getMarkdown' : 'getHTML';
    emit('update:modelValue', toastUi.editor[contentType]());
  });
});
</script>
<template>
  <div id="editor"></div>
</template>
<style lang="scss" scoped>
@import 'https://uicdn.toast.com/editor/latest/toastui-editor.min.css';
#editor {
  @apply bg-white;
  :deep(.toastui-editor-mode-switch) {
    display: none !important;
  }
  :deep(.fullscreen) {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999;
    background: #fff;
  }
}
</style>
